<template>
	<view>
	
		
		<view class="formStyle">
         <view  class="head-sculpture">
						  <img src="../../static/login/登录头像.png" alt="">
		</view>
			<uni-forms ref="userForm" :rules="userRules" labelWidth="80px" :modelValue="user" class="userBox">
				<uni-forms-item label="姓名:" required name="name">
					<uni-easyinput v-model="user.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="用户名:" required name="userName">
					<uni-easyinput v-model="user.userName" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="移动电话:" required name="phoneNumber">
					<uni-easyinput v-model="user.phoneNumber" placeholder="请输入个人移动电话号码" />
				</uni-forms-item>
				<uni-forms-item label="电子邮件:" required name="email">
					<uni-easyinput v-model="user.email" placeholder="请输入个人电子邮件" />
				</uni-forms-item>
				<uni-forms-item label="登录密码:" required name="password">
					<uni-easyinput type="password" v-model="user.password" placeholder="请输入登录密码" />
				</uni-forms-item>
				<uni-forms-item label="重复密码:" required name="confirmPassword">
					<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请输入重复密码" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('userForm')" class="styleSloid">注册</button>
			<view>
				<text style="color:red;padding: 15px;">{{ registerError }}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	// 导入自定义的数据演示用
 const userData =require('@/Data/UserData.json');
	
	export default{
		data(){
			return{
				// 用户数据模型
				user:{
					name:'zhouhuanying',
					userName:'zhangxiaofei',
					phoneNumber:'13617808232',
					email:'hyg@qq.com',
					password:'1234@Abcd',
					confirmPassword:'1234@Abcd'
				},
				// 用户数据校验规则
				userRules:{
					name:{
						rules:[{
							required:true,
							errorMessage:'姓名不能为空',
						}]
					},
					userName:{
						rules:[{
							required:true,
							errorMessage:'用户名不能为空',
						}]
					},
					phoneNumber:{
						rules:[{
							required:true,
							errorMessage:'移动电话不能为空',
						} ,{
							validateFunction:function(rule,value,data,callback){
								let phoneNumberReg=/^[0-9]{11,11}$/
								if(!phoneNumberReg.test(value)){
									callback('手机号码格式错误')
								}
							}
						}]
					},
					email:{
						rules:[{
							required:true,
							errorMessage:'联系电子邮件不能为空',
						} ,{
							validateFunction:function(rule,value,data,callback){
								let emailReg=/^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/
								if(!emailReg.test(value)){
									callback('电子邮件格式错误')
								}
							}
						}]
					},
					password:{
						rules:[{
							required:true,
							errorMessage:'登录密码不能为空',
						},{
							validateFunction:function(rule,value,data,callback){
								let passwordReg=/^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/
								if(!passwordReg.test(value)){
									callback('密码最少8位，包括大、小写字母，数字，特殊字符')
								}
							}
						}]
					},
					confirmPassword:{
						rules:[{
							required:true,
							errorMessage:'重复密码不能为空',
						},{
							validateFunction:function(rule,value,data,callback){
								if(value != data.password){
									callback('密码与重复密码不匹配')
								}
							}
						}]
					},
				},
				// 用户数据集合
				userCollection:null,
				// 业务数据校验结果
				registerError:'',
			}
		},
		onLoad(){
			this.setUserCollection();
		},
		
		methods:{
			// 本地数据源数据
			setUserCollection(){
				this.userCollection = userData;
			},
			// 提交注册资料
			submit(ref){
				this.$refs[ref].validate().then(res => {
					// 检查用户名是否重复
					// var tobeUser = this.userCollection.find(x=>x.userName === this.user.userName)
					// 使用全局变量
					var tobeUser = getApp().globalData.globalUserCollection.find(x=>x.userName === this.user.userName)
				     console.log(user);
					if(tobeUser != null){
						this.registerError = '你选择的用户名已经被别人使用！'
					}else{
						this.registerError = ''
						// 添加到当前的用户集合中
						getApp().globalData.globalUserCollection.push(this.user)
						// 为当前用户赋值
						getApp().globalData.globalUser = this.user
						
						let tokenJsonString = JSON.stringify(this.user) 
						// 则将注册的数据存储到 token
						uni.setStorage({
							key:'token',
							data:tokenJsonString,
							success:function(){
								// 跳转至学习中心
								uni.reLaunch({
									url:"/pages/login//login"
								})
							}
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.formStyle {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		margin-top: 20%;
		//background-color: #fff;
	}
	.head-sculpture{
		margin-bottom: 20px;
	}
	 .head-sculpture img{
		background-size: cover;
	}
	.userBox{
		width: 75%;
	}
	.styleSloid{
		width: 75%;
	}

</style>
